<!--
 * @Author: lwHao
 * @Date: 2020-11-06 14:41:04
 * @LastEditors: lwHao
 * @LastEditTime: 2020-11-06 18:36:45
-->
<template>
  <Layout>
    <div>
      <el-card shadow="hover" v-for="({node:item},index) in $page.projects.edges" :key="'pro'+index" style="margin-bottom: 20px">
        <div slot="header">
          <el-row>
            <el-col :span="16">
              <span>
                <a style="text-decoration:none;cursor:pointer" @click="goGithub(item.html_url)">
                  <i class="el-icon-service"></i>
                  &nbsp;&nbsp; {{item.full_name}}
                </a>
              </span>
            </el-col>
            <el-col :span="8">
              <div style="text-align: right;">
                <el-button @click="goGithub(item.html_url)" style="padding: 3px 0" type="text" icon="el-icon-back">前往Gitee</el-button>
                <!-- <el-button @click="$share('/user/project/details/'+item.name)" style="padding: 3px 0" type="text" icon="el-icon-share"></el-button> -->
              </div>
            </el-col>
          </el-row>
        </div>
        <div style="font-size: 0.9rem;line-height: 1.5;color: #606c71;">最近更新 {{item.updated_at}}</div>
        <div style="font-size: 1.1rem;line-height: 1.5;color: #303133;padding: 10px 0px 0px 0px">{{item.description}}</div>
        <div style="font-size: 1.1rem;color: #303133;padding: 10px 0px 0px 0px">
          <el-row>
            <el-col :span="16" style="padding-top: 5px">
              <el-tooltip effect="dark" :content="'star '+item.stargazers_count" placement="bottom">
                <i class="el-icon-star-off" style="margin: 0px 5px 0px 0px"></i>
              </el-tooltip>
              {{item.stargazers_count}}
              <el-tooltip effect="dark" :content="'watch '+item.watchers_count" placement="bottom">
                <i class="el-icon-view" style="margin: 0px 5px 0px 15px"></i>
              </el-tooltip>
              {{item.watchers_count}}
              <el-tooltip effect="dark" :content="'fork '+item.forks_count" placement="bottom">
                <i class="el-icon-bell" style="margin: 0px 5px 0px 15px"></i>
              </el-tooltip>
              {{item.forks_count}}
            </el-col>
            <el-col :span="8" style="text-align: right;">
              <el-tag size="small" type="danger" v-if="item.license">{{item.license}}</el-tag>
              <el-tag size="small" type="success" v-if="item.language">{{item.language}}</el-tag>
            </el-col>
          </el-row>
        </div>
      </el-card>

      <div style="text-align: center">
        <el-pagination @current-change="onSelect" background layout="prev, pager, next" :current-page.sync="$page.projects.pageInfo.currentPage" :page-size="4" :total="$page.projects.pageInfo.totalItems"></el-pagination>
      </div>
    </div>
  </Layout>
</template>

<page-query>
query ($page: Int) {
  projects: allProject(page:$page ,perPage:4) @paginate {
    edges{
      node{
        full_name
        human_name
        html_url
        updated_at
        description
        stargazers_count
        watchers_count
        forks_count
      }
    }
    pageInfo {
      totalPages
      currentPage
      totalItems
    }
  }
}
</page-query>

<script>
export default {
  name: 'project',
  metaInfo: {
    title: '开源项目'
  },
  methods: {
    goGithub(url) {
      window.open(url)
    },
    onSelect(page){
      this.$router.push('/project'+ (page===1? '' : `/${page}`))
    }
  }
}
</script>

<style>
</style>